<template>
    <div class="news">
        <ul>
            <li v-for="item in newsList" :key="item.id">
                <!--第一种写法
                <RouterLink :to="`/news/detail?id=${item.id}&title=${item.title}&content=${item.content}`">
                    {{item.title}}
                </RouterLink>
                -->
                <!--第二种写法-->
                <!-- <RouterLink 
                    :to="{
                        /* path: '/news/detail', */
                        name: 'xiangqing',
                        query: {
                            id: item.id,
                            title: item.title,
                            content: item.content
                        }
                    }">
                    {{item.title}}
                </RouterLink> -->
                <!-- 第三种写法 -->
                <!-- <RouterLink 
                    :to="{
                        name: 'xiangqing',
                        params: {
                            id: item.id,
                            title: item.title,
                            content: item.content
                        }
                    }">
                    {{item.title}}
                </RouterLink> -->
                <RouterLink 
                    :to="{
                        name: 'xiangqing',
                        query: {
                            id: item.id,
                            title: item.title,
                            content: item.content
                        }
                    }">
                    {{item.title}}
                </RouterLink>
                <button @click="showDetail(item)">查看详情</button>
            </li>
        </ul>
        <div class="detail-container">
            <h2>新闻详情</h2>
            <RouterView></RouterView>
        </div>
    </div>
</template>
<script setup lang="ts" name="News">
    import {reactive} from 'vue'
    import {useRouter} from 'vue-router'
    const router = useRouter()
    
    const newsList = reactive( [
    {id:'new001',title:'抗癌食物',content:'西兰花 白萝卜'},
    {id:'new002',title:'如何一夜暴富',content:'学IT'},
    {id:'new003',title:'震惊，万万没想到',content:'明天是周一'},
    {id:'new004',title:'好消息！',content:'快过年了！'}
    ])

    const showDetail = (item:any) => {
        router.push({
            name: 'xiangqing',
            query: {
                id: item.id,
                title: item.title,
                content: item.content
            }
        })
    }

</script>
<style scoped>
    .news {
            display: flex;
            justify-content: left;
            align-items: top;
            gap: 10px;
        }
    .detail-container{
        margin: 30px 40px;
        text-align: left;
        height: 600px;
        width: 600px;
        line-height: 70px;
        border-radius: 10px;
        box-shadow: 0 0 2px;
    }
</style>